<template>
  <!-- 商品展示组件 -->
  <van-card
    id="pro"
    :title="item.protit"
    :price="`${item.place}·¥${item.price}/${item.netcontent}`"
    :thumb="item.proUrl"
    color="#fff"
    :class="{ noborder: index == 2 }"
    lazy-load
    currency=" "
  >
    <template #desc>
      <div class="Enm">{{ item.Eprotit }}</div>
      <div class="score">
        {{ `${item.score}   ` }}
        <van-rate
          v-model="value"
          void-icon="star"
          void-color="#eee"
          color="#78cccd"
          size="12.2px"
          :readonly="false"
          allow-half
        />
        <strong>{{ `(${item.evaluatenum}人评分)` }}</strong>
      </div>
    </template>
  </van-card>
</template>
<script>
import { Card, Rate } from "vant";
export default {
  props: ["item", "index"],
  data() {
    return {};
  },
  components: {
    VanCard: Card,
    VanRate: Rate,
  },
  computed: {
    value() {
      return parseFloat(this.item.score);
    },
  },
  methods: {},
};
</script>
<style lang="less">
@import "../../../../assets/css/var.less";
.van-card {
  .border() !important;
  background: #fff !important;
  &.noborder {
    border: none !important;
  }
}
#pro {
  .van-card__header {
    .van-card__content {
      .van-card__title {
        .ellipsis ();
        height: 20px;
        line-height: 20px;
        font-size: 15px;
        color: #333333;
      }
      .Enm {
        height: @l-font;
        line-height: @l-font;
        font-size: 10px;
        color: #999999 !important;
      }
      .score {
        height: @xl-font;
        line-height: @xl-font;
        font-size: 12px;
        font-family: DIN;
        font-weight: bold;
        color: #68dcdc;
        strong {
          margin-left: 10px;
          color: #666;
        }
        .van-rate {
          margin-left: 5px;
          transform: translateY(1px);
        }
      }
      .van-card__bottom {
        line-height: 30px;
      }
    }
    .van-card__bottom {
      .van-card__price-integer {
        font-size: 11px;
      }
    }
  }
}
</style>
